<template>
    <div class="content-wrap">
        <div class="content-top-box">
            <!-- 搜索区域 -->
            <ul class="search-container">
                <li>
                    <span class="search-item-name">手机号：</span>
                    <el-input
                        class="search-item-content search-item-text"
                        placeholder="请输入手机号"
                        v-model="phone"
                        clearable
                        maxlength="11"
                        @clear="clearPhoneFn"
                    >
                    </el-input>
                </li>
                <li>
                    <span class="search-item-name">姓名：</span>
                    <el-input
                        class="search-item-content search-item-text"
                        placeholder="请输入姓名"
                        v-model="userName"
                        clearable
                        @clear="clearUserName"
                    >
                    </el-input>
                </li>
                <li>
                    <span class="search-item-name">订单编号：</span>
                    <el-input
                        style="width: 185px;"
                        class="search-item-content search-item-text"
                        placeholder="请输入订单编号"
                        v-model="orderNo"
                        clearable
                        @clear="clearOrderNo"
                    >
                    </el-input>
                </li>
                <li>
                    <span class="search-item-name">供货时间：</span>
                    <el-date-picker
                        v-model="supplyDate"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        @change="changeSupplyDate">
                    </el-date-picker>
                </li>
                <li>
                    <span class="search-item-name">供货状态：</span>
                    <el-select
                        class="search-item-content"
                        v-model="supplyType" 
                        placeholder="请选择"
                        clearable
                        @change="changeSupplyType"
                    >
                        <el-option
                            v-for="item in supplyTypeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </li>
                <li>
                    <el-button class="search-btn" type="primary" icon="el-icon-search" @click="searchFn" v-if="searchBtn">查询</el-button>
                    <download-excel
                        class = "export-excel-wrapper"
                        :data = "jsonData"
                        :fields = "jsonFields"
                        v-if="exportBtn"
                        name = "供货记录表.xls">
                        <el-button class="search-btn" type="primary" icon="el-icon-download">导出</el-button>
                    </download-excel>
                </li>
            </ul>
        </div>

        <div class="content-bottom-box">
            <!-- 表格 -->
            <div class="content-form-box">
                <el-table
                    v-loading="loadingFlag"
                    :data="tableData"
                    :height="tableHeight"
                    ref="table"
                    border
                    stripe
                    style="width: 100%"
                >
                    <el-table-column
                        prop="serialNumber"
                        label="序号"
                        width="50"
                        fixed>
                    </el-table-column>
                    <el-table-column
                        prop="supplyTradeNo"
                        label="订单编号"
                        width="180"
                        fixed>
                    </el-table-column>
                    <el-table-column
                        prop="supplyTime"
                        label="供货时间"
                        width="160">
                    </el-table-column>
                    <el-table-column
                        prop="statusValue"
                        label="供货状态"
                        width="80">
                    </el-table-column>
                    <el-table-column
                        prop="userName"
                        label="姓名"
                        width="100">
                    </el-table-column>
                    <el-table-column
                        prop="phone"
                        label="手机号"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="salesPrice"
                        label="供货单价(元/kg)"
                        width="130">
                    </el-table-column>
                    <el-table-column
                        prop="productWeight"
                        label="整牛重量(kg/头)"
                        width="130">
                    </el-table-column>
                    <el-table-column
                        prop="totalPrice"
                        label="整牛单价(元/头)"
                        width="130">
                    </el-table-column>
                    <el-table-column
                        prop="deliveryMonth"
                        label="交货期"
                        width="80">
                    </el-table-column>
                    <el-table-column
                        label="养殖地区"
                        width="100">
                        <template slot-scope="scope">
                            <span>{{scope.row.originProvince}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="supplyNum"
                        label="供货数量(头)"
                        width="110">
                    </el-table-column>
                    <el-table-column
                        prop="cattleIdCard"
                        label="耳标号"
                        width="124">
                    </el-table-column>
                    <el-table-column
                        prop="payMoney"
                        label="供货金额(元)"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="completeTime"
                        label="供货完成时间"
                        width="160">
                    </el-table-column>
                    <el-table-column
                        prop="contractCode"
                        label="合同编号"
                        width="140">
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        fixed="right">
                        <template slot-scope="scope">
                            <el-button @click="checkUserInfoFn(scope.row.index)" type="text" size="small" v-if="detailBtn">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 页码 -->
            <div class="content-Page-container">
                <BaseFormPage 
                    :pagination="pagination"
                    @cFirstPageFn="cFirstPageFn"
                    @cLastPageFn="cLastPageFn"
                    @cJumpPageFn="cJumpPageFn"
                    @cPreFn="cPreFn"
                    @cNextFn="cNextFn"
                    @cRefreshFn="cRefreshFn"
                    >
                </BaseFormPage>
            </div>
        </div>

        <!-- 弹窗 -->
        <el-dialog 
            title="订单详情" 
            :visible.sync="dialogFlag"
            :show-close="false"
            width="804px"
        >
            <div class="dialog-box">
                <p class="dialog-box-title">订单信息</p>
                <div class="info-detail-box">
                    <div class="info-detail-list">
                        <ul>
                            <li>
                                <span class="info-tag-name">姓名：</span>
                                <span class="info-tag-text">{{detailData.userName}}</span>                
                            </li>
                            <li>
                                <span class="info-tag-name">手机号：</span>
                                <span class="info-tag-text">{{detailData.phone}}</span>
                            </li>
                            <li>
                                <span class="info-tag-name">订单编号：</span>
                                <span class="info-tag-text">{{detailData.supplyTradeNo}}</span>                
                            </li>
                            <li>
                                <span class="info-tag-name">供货时间：</span>
                                <span class="info-tag-text">{{detailData.supplyTime}}</span>
                            </li>
                            <li>
                                <span class="info-tag-name">供货状态：</span>
                                <span class="info-tag-text">{{detailData.statusValue}}</span>
                            </li>
                            <li>
                                <span class="info-tag-name">养殖周期：</span>
                                <span class="info-tag-text">{{detailData.timeLimit}}个月</span>
                            </li>
                            <li>
                                <span class="info-tag-name">剩余交货期：</span>
                                <span class="info-tag-text">{{detailData.deliveryMonth}}</span>
                            </li>
                            <li>
                                <span class="info-tag-name">整牛重量(kg/头)：</span>
                                <span class="info-tag-text">{{detailData.productWeight}}</span>
                            </li>
                        </ul>
                    </div>
                    
                    <ul class="info-detail-list">
                        <li>
                            <span class="info-tag-name">供货单价(元/kg)：</span>
                            <span class="info-tag-text">{{detailData.salesPrice}}</span>
                        </li>
                        <li>
                            <span class="info-tag-name">供货整牛单价(元/头)：</span>
                            <span class="info-tag-text">{{detailData.totalPrice}}</span>
                        </li>
                        <li>
                            <span class="info-tag-name">供货数量(头)：</span>
                            <span class="info-tag-text">{{detailData.supplyNum}}</span>
                        </li>
                        <li>
                            <span class="info-tag-name">供货耳标号：</span>
                            <span class="info-tag-text">{{detailData.cattleIdCard}}</span>
                        </li>
                        <li>
                            <span class="info-tag-name">供货金额(元)：</span>
                            <span class="info-tag-text">{{detailData.payMoney}}</span>
                        </li>
                        <li>
                            <span class="info-tag-name">养殖地区：</span>
                            <span class="info-tag-text">{{detailData.originProvince}}</span>
                        </li>
                        <li>
                            <span class="info-tag-name">养殖牧场：</span>
                            <span class="info-tag-text">{{detailData.farmName}}</span>
                        </li>
                        <li>
                            <span class="info-tag-name">合同编号：</span>
                            <span class="info-tag-text">{{detailData.contractCode}}</span>
                        </li>
                    </ul>
                </div>
                <div class="dialog-btn">
                    <el-button type="primary" size="medium" @click="dialogFlag = false">关闭</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import Storage from "@/utils/storage";
import BaseFormPage from '@/components/BaseFormPage';
export default {
    components: {
        BaseFormPage
    },
    data() {
        return {
            loadingFlag: false,         //表格数据加载状态
            dialogFlag: false,          //弹窗显示状态
            phone: '',
            userName: '',
            orderNo: '',
            supplyDate: '',
            startSupplyTime: '',
            endSupplyTime: '',
            supplyType: '',
            supplyTypeOptions: [
                {
                    value: '2',
                    label: '待收款'
                },
                {
                    value: '5',
                    label: '已完成'
                },
            ],
            detailData: {},
            pageIndex: 1,
            pageSize: 20,
            tableHeight: 200,           //表格初始高度
            tableData: [],              //表格数据
            pagination: {               //分页数据
                loadingFlag: false,     //数据加载状态
                currentPage: 1,         //当前页
                totalPage: 1,           //总页数
                totalNum: 0,            //总条数
                firstNum: 0,            //分页显示起始值
                endNum: 0               //分页显示结束值
            },

            jsonFields: {
                "序号": "index",
                "订单编号": "supplyTradeNo",
                "供货时间": "supplyTime",
                "供货状态": "statusValue",
                "姓名": "userName",
                "供货单价(元/kg)": "salesPrice",
                "整牛重量(kg/头)": "productWeight",
                "整牛单价(元/头)": "totalPrice",
                "交货期": "deliveryMonth",
                "养殖地区": "originProvince",
                "供货数量(头)": "supplyNum",
                "耳标号": "cattleIdCard",
                "供货金额(元)": "payMoney",
                "供货完成时间": "completeTime",
                "手机号": "phone",
                "合同编号": "contractCode"
            },
            jsonData: [],
            jsonMeta: [
                [
                    {
                        "key": "charset",
                        "value": "utf-8"
                    }
                ]
            ],

            searchBtn: (JSON.parse(Storage.get('roleAuthIdArr'))).indexOf(222) == -1 ? false : true,
            exportBtn: (JSON.parse(Storage.get('roleAuthIdArr'))).indexOf(223) == -1 ? false : true,
            detailBtn: (JSON.parse(Storage.get('roleAuthIdArr'))).indexOf(224) == -1 ? false : true,
        }
    },
    created() {
        this.getListData()
    },
    methods: {
        getListData() {
            this.loadingFlag = true;
            this.pagination.loadingFlag = true;
            let params = {
                phone: this.phone,
                userName: this.userName,
                startSupplyTime: this.startSupplyTime,
                endSupplyTime: this.endSupplyTime,
                status: this.supplyType,
                refNo: this.orderNo,
                pgCt: this.pageIndex,
                pgSz: this.pageSize
            }
            if(!this.phone) {
                delete params.phone
            }
            if(!this.userName) {
                delete params.userName
            }
            if(!this.startSupplyTime) {
                delete params.startSupplyTime
            }
            if(!this.endSupplyTime) {
                delete params.endSupplyTime
            }
            if(!this.supplyType) {
                delete params.status
            }
            if(!this.orderNo) {
                delete params.refNo
            }

            this.$http.get('/supply/order_list', params)
                .then((res) => {
                    if(res.data.records.length > 0) {
                        this.pagination.totalPage = res.data.pages
                        this.pagination.totalNum = res.data.total
                        
                        res.data.records.forEach((item, index) => {
                            //列表下标
                            item.index = index
                            //列表序号
                            item.serialNumber = ((this.pageIndex - 1) * this.pageSize) + (index + 1)
                            //无数据处理
                            item.cattleIdCard = item.cattleIdCard || '--'
                            item.completeTime = item.completeTime || '--'
                        })
                        this.pagination.firstNum = res.data.records[0].serialNumber
                        this.pagination.endNum = res.data.records[res.data.records.length-1].serialNumber
                    }else{
                        this.pagination.currentPage = 1
                        this.pagination.totalPage = 1
                        this.pagination.totalNum = 0
                        this.pagination.firstNum = 0
                        this.pagination.endNum = 0
                    }
                    this.tableData  = res.data.records;
                }).then(() => {
                    this.tableHeightFn();
                    this.loadingFlag = false;
                    this.pagination.loadingFlag = false;
                    this.getAllListData()
                })
        },
        getAllListData() { //导出数据
            let params = {
                phone: this.phone,
                userName: this.userName,
                startSupplyTime: this.startSupplyTime,
                endSupplyTime: this.endSupplyTime,
                status: this.supplyType,
                refNo: this.orderNo,
                pgCt: 1,
                pgSz: 999999999
            }
            if(!this.phone) {
                delete params.phone
            }
            if(!this.userName) {
                delete params.userName
            }
            if(!this.startSupplyTime) {
                delete params.startSupplyTime
            }
            if(!this.endSupplyTime) {
                delete params.endSupplyTime
            }
            if(!this.supplyType) {
                delete params.status
            }
            if(!this.orderNo) {
                delete params.refNo
            }

            this.$http.get('/supply/order_list', params)
                .then((res) => {
                    if(res.data.records.length > 0) {
                        res.data.records.forEach((item, index) => {
                            item.index = index + 1
                            item.originArea = item.originProvince + item.originCity
                        })
                    }
                    this.jsonData = res.data.records
                })
        },
        tableHeightFn() { //表格高度
            let tableDataLength = this.tableData.length;
            let minHeight = tableDataLength == 0 ? 0 : 80;
            this.$nextTick(function () {
                this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - minHeight;
                if(this.tableData.length <= 0) {
                    this.tableHeight = '60vh'
                }
                
                let self = this;
                window.onresize = function() {
                    self.tableHeight = window.innerHeight - self.$refs.table.$el.offsetTop - minHeight;
                    self.tableHeight = self.tableHeight < 200 ? 200 : self.tableHeight;
                }
            })
        },
        resetPageIndex() { //重置页码
            this.pagination.currentPage = 1;
            this.pageIndex = 1;
        },
        clearPhoneFn() { //清空手机号
            this.resetPageIndex()
            this.getListData()
        },
        clearUserName() { //清空姓名
            this.resetPageIndex()
            this.getListData()
        },
        clearOrderNo() { //清空订单编号
            this.resetPageIndex()
            this.getListData()
        },
        changeSupplyDate() { //选择供货时间
            if(this.supplyDate) {
                this.startSupplyTime = this.supplyDate[0]
                this.endSupplyTime = this.supplyDate[1].replace('00:00:00', '23:59:59')
            }else{
                this.startSupplyTime = ''
                this.endSupplyTime = ''
            }
            this.resetPageIndex()
            this.getListData()
        },
        changeSupplyType() { //选择供货状态
            this.resetPageIndex()
            this.getListData()
        },
        searchFn() { //搜索
            this.resetPageIndex()
            this.getListData()
        },
        checkUserInfoFn(index) { //查看详情
            this.dialogFlag = true;
            this.detailData = this.tableData[index]
        },
        cFirstPageFn(pageNum) { //首页
            this.pageIndex = pageNum;
            this.getListData()
        },
        cLastPageFn(pageNum) { //尾页
            this.pageIndex = pageNum;
            this.getListData()
        },
        cJumpPageFn(pageNum) { //页码跳转
            this.pageIndex = pageNum;
            this.getListData()
        },
        cPreFn(pageNum) { //上一页
            this.pageIndex = pageNum;
            this.getListData()
        },
        cNextFn(pageNum) { //下一页
            this.pageIndex = pageNum;
            this.getListData()
        },
        resetParams() { //重置参数
            this.phone = ''
            this.userName = ''
            this.orderNo = ''
            this.supplyDate = ''
            this.startSupplyTime = ''
            this.endSupplyTime = ''
            this.supplyType = ''
            this.detailData = {}
            this.tableData = []
            this.pageIndex = 1
            this.pageSize = 20
            this.pagination = {
                loadingFlag: false,
                currentPage: 1,
                totalPage: 1,
                totalNum: 0,
                firstNum: 0,
                endNum: 0
            }
        },
        cRefreshFn() { //刷新
            this.resetParams()
            this.getListData()
        }
    }
}
</script>

<style lang="scss" scoped>
    .dialog-box {
        .dialog-box-title {
            margin-bottom: 20px;
            padding-left: 50px;
            box-sizing: border-box;
            color: #344047;
            font-weight: 600;
        }
        .info-detail-box {
            width: 100%;
            display: flex;
            .info-detail-list {
                width: 50%;
                &:nth-of-type(1) {
                    padding-right: 5px;
                    box-sizing: border-box;
                }
                &:nth-of-type(2) {
                    padding-left: 5px;
                    box-sizing: border-box;
                }
                li {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    margin-bottom: 12px;
                    .info-tag-name {
                        width: 144px;
                        text-align: right;
                    }
                    .info-tag-text {

                    }
                }
            }
        }
        .dialog-btn {
            width: 100%;
            padding-top: 28px;
            text-align: center;
        }
    }
</style>